<template>
  <CompBox style="height: 100%">
    <div style="height: 100%;width: 100%;">
      <div id="middleChart" style="width: 100%;height: 100%;padding-top: 20px"></div>
    </div>
  </CompBox>
</template>

<script setup>
import CompBox from "@/views/screen/component/CompBox.vue";
import * as echarts from "echarts";
import {onMounted, reactive} from "vue";
import {getMiddle} from "../../../api/business/screen";

const devList = reactive([
  {
    name: '平台稼动率',
    data: [],
  },{
    name: '激光稼动率',
    project: 1,
    type: 1,
    data: [],
  },{
    name: '火焰稼动率',
    project: 1,
    type: 3,
    data: [],
  },{
    name: '等离子稼动率',
    project: 1,
    type: 2,
    data: [],
  },{
    name: '机器人稼动率',
    project: 0,
    type: 2,
    data: [],
  },
])
onMounted(()=>{
  initChart()
  initData()
  setInterval(()=>{
    initChart()
    initData()
  }, 10000)
})
function initData() {
  getMiddle().then((res)=>{
    const temp = {}
    devList.forEach((item)=>{
      if (item.project === undefined){
        res.data.map((i,index)=>{
          if (temp[i.date]){
            temp[i.date].utilization = parseFloat(temp[i.date].utilization) + parseFloat(i.utilization)
            temp[i.date].count += 1
          }else {
            if (!temp[i.date]){
              temp[i.date] = {}
            }
            Object.assign(temp[i.date],i)
            temp[i.date].count = 1
          }
          if (index == res.data.length - 1){
            let values = Object.values(temp)
            values.forEach((i)=>{
              if (i.count){
                i.utilization = i.utilization / i.count
              }
            })
            item.data = values
          }
        })
      }else {
        item.data = res.data.filter((i)=>{
          return  i.project == item.project && i.type == item.type
        })
      }

    })
    initChart()
  })

}
function initChart() {
  // 初始化 echarts 实例
  const myChart = echarts.init(document.getElementById('middleChart'));

  // 配置项
  const option = {
    width: '80%',
    height: '115px',
    legend: {
      data: devList.map((i)=>i.name),
      textStyle: {
        color: '#fff'
      },
      selected: {
        '平台稼动率': true,
        '激光稼动率': true,
        '火焰稼动率': false,
        '等离子稼动率': false,
        '机器人稼动率': false,
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      formatter: function (params) {
        var result = params[0].value[0] + '<br/>';
        params.forEach(function (item) {
          result += item.seriesName + ': ' + item.value[1] + '%<br/>';
        });
        return result;
      }
    },
    dataZoom: [
      {
        type: 'inside', // 支持鼠标滚轮缩放
        start: 0,
        end: 100
      }
    ],
    xAxis: {
      type: 'category',
      boundaryGap: true,
      //data: Array.from({length: 30}, (_, i) => i + 1),
      name: '日期',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        rotate: 45,
        formatter: (value)=>{ return value.substring(5)}
      },
    },
    yAxis: {
      type: 'value',
      name: '稼动率 (%)',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: false,
      }
    },
    series: devList.map((item)=>{
      return {
        type: 'line',
        data: item.data.map((i)=>{
          return [
              i.date,
              (i.utilization * 100).toFixed(3)
          ]
        }),
        name: item.name,
        smooth: true, // 是否平滑曲线
        symbol: 'none', // 不显示坐标点
        symbolSize: 0, // 坐标点大小设置为0
      }
    })
  };

// 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

</script>

<style scoped>

</style>